<template>
	<view>
		<view class="status_bar"></view>
		<!-- 顶部导航栏 -->
		<view class="topBar themeBac f-c-c">
			<u-search @click="$to('../search/search')" disabled height="55" placeholder="请搜索关键词" :action-style="searchStyle"></u-search>
		</view>

		<!-- 一级标题 -->
		<view class="primaryTitle f-c">
			<view @click="$to(`../search-toPage/search-toPage?name=${item.name}&id=${item.id}`)" v-for="(item,index) in primaryTitleList" class="primaryTitle-item f-co-c themeColor f25">
				<image :src="baseUrl+item.img" mode=""></image>
				<text>{{item.name}}</text>
			</view>
		</view>
		
		<!-- 推荐展示 -->
		<view class="recommend">
			<u-empty v-show="show" text="暂无数据" mode="list"></u-empty>
			<!-- 点击后 要要判断 类型跳转到对应的页面 -->
			<view @click="item.type==='1'?$to(`../looking-for-goods/looking-for-goods?id=${item.id}&isMe=false&status=寻找失主`):$to(`../looking-for-goods/looking-for-goods?id=${item.id}&isMe=false&status=赏金`)" class="recommend-item f30 cwhite" v-for="(item,index) in recommendList" :key="index">
				<image :src="baseUrl+item.coverimg" mode=""></image>
				<view style="padding: 5rpx;">
					<view class="">{{item.title}}</view>
					<text style="margin-right: 30rpx;">{{item.type==='1'?'寻找失主':'赏金'}}</text>
					<text>{{item.goodstype.name}}</text>
				</view>
			</view>
		</view>
		
		<Tabbar></Tabbar>
	</view>
</template>

<script>
	import Tabbar from '../../components/Tabbar.vue'
	export default {
		components: {
	Tabbar
},
		data() {
			return {
				baseUrl:this.$u.baseUrl,
				primaryTitleList: [],
				/* 推荐展示列表 */
				recommendList:[],
				searchStyle:{
					color:"#ffffff"
				},
				show:false
			}
		},
		onShow() {
			uni.hideTabBar()
			/* 获取物品分类 */
			this.goodstypeinfo()
			/* 获取物品信息列表 */
			this.goodsList()
		},
		methods: {
			async goodstypeinfo(){
				const res= await this.$u.api.goodstypeinfo()
				console.log(res.data);
				this.primaryTitleList=res.data
			},
			async goodsList(){
				const res =await this.$u.api.goodsList()
				console.log(res);
				this.recommendList=res.data
				!res.success?this.show=true:this.show=false
			}
		}
	}
</script>

<style>
	/* 手机系统 系统状态栏高度 */
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
		background-color: #333333;
	}
	.topBar {
		height: 100rpx;
		padding: 0 30rpx;
	}


	.primaryTitle {
		overflow-x: auto;
		overflow-y: hidden;
		height: 150rpx;
		margin: 30rpx;
		/* padding: 30rpx; */
		padding: 0 20rpx;
	}
	.primaryTitle-item{
		margin: 0 20rpx;
	}

	.primaryTitle-item text {
		white-space: nowrap;
		overflow-x: auto;
	}

	.primaryTitle-item image {
		width: 95rpx;
		height: 95rpx;
		/* background-color: #373737; */
		border-radius: 50%;
	}
	
	.recommend{
		display: flex;
		flex-wrap: wrap;
		margin: 40rpx 0;
		justify-content: space-between;
		padding: 25rpx;
	}
	
	.recommend-item{
		width: 331rpx;
		background-color: #707070;
		border-radius: 15rpx;
		margin-bottom: 20rpx;
	}
	
	.recommend-item image{
		width: 100%;
		height: 291rpx;
		border-radius: 15rpx;
	}
	.u-empty{
		position: relative;
		margin-top: 100rpx!important;
		left: 50%;
		margin-left: -60rpx;
	}
</style>
